<?php
$itemsPhoto = $this->dataPhoto;
?>

<div class="mainpage">
<form method="post" enctype="multipart/form-data">
    <div class="top-tools">
    <?php echo $this->flashMessenger()?>
        <div class="pull-left">
            <a href="/admin/product-image/read" class="exit btn"><i class="icon-hand-left hint" data-hint-msg="Quay lại"></i></a>
    	</div>
        <div class="pull-right">
            <input type="submit" name="submit" class="btn btn-primary" value="Submit" style="width:200px"/>
        </div>
        <div class="clear"></div>
    </div>

    <div class="row-fluid">
        <div class="span4 well form-horizontal" style="float:left;width:320px">
            <div class="control-group">
                <label class="control-label"> Photo </label>
                <div class="controls">
                    <input type="file" name="thumbnail_up" />
                </div>
            </div>
            <div class="control-group">
                <label class="control-label"> Caption </label>
                <div class="controls">
                    <textarea name="caption_up" id="caption_up"></textarea>
                </div>
            </div>
<!--             <div class="control-group"> -->
<!--                 <label class="control-label"> Link to </label> -->
<!--                 <div class="controls"> -->
<!--                     <input type="text" name="link_to" id="link_to"/> -->
<!--                 </div> -->
<!--             </div> -->
            <div class="control-group">
                <label class="control-label"> Sorting number </label>
                <div class="controls">
                    <input type="text" name="sorting_number_up" id="sorting_number_up"/>
                </div>
            </div>
            <div class="form-action-group">
                <input type="submit" name="submit" class="btn btn-primary" value="Submit" style="width:200px"/>
            </div>
        </div>

        <div class="span8" style="float:right;overflow:hidden">
            <div class="row-fluid">
                <ul class="thumbnails">
                <?php foreach ($itemsPhoto as $photo): ?>
                    <li>
                        <div class="thumbnail" style="padding:18px;">
                            <img src="<?php echo $photo['path']; ?>"  alt="" style="width:725px;height:300px;"/>
                            <label style="display:inline;margin-left:10px">Delete</label>
                            <input type="checkbox" name="item_checker[]" value="<?php echo $photo['id']?>"/> &nbsp;|&nbsp;
                            <label style="display:inline;">Sorting number:</label>
                            <input type="text" name="sorting_number[]" value="<?php echo $photo['sorting_number']; ?>" class="input-mini" style="width:15px;margin-top:5px;"/>
                            <!-- label style="display:inline;">Link to:</label>
                            <input type="text" name="link_to[]" value="<?php echo $photo['link_to']; ?>" class="input-mini" style="width:250px;margin-top:5px;"/ -->
                            <br/>
                            <label style="display:inline;margin-left:10px;">Caption:</label>
                            <textarea name="caption[]"><?php echo $photo['caption']; ?></textarea>
                            <input type="hidden" name="id[]" value="<?= $photo['id'] ?>">
                        </div>
                    </li>
                <?php endforeach; ?>
                </ul>
            </div>
        </div>
    </div>
    <div class="clear"></div>
</form>
</div>
<style>
.form-horizontal .control-label {
	float: left;
	width: 100%;
	text-align: left;
}
.form-horizontal .controls {
    margin: 20px 0px 0px 20px;
}
.more-images {
	display: none !important;
}
</style>

<script>
$(document).ready(function() {
    $('#add-more-images').click(function() {
    	t = $('.more-images');
        datani = parseInt(t.attr('data-ni'));
        if(datani > 10) {
            alert('Max file upload is < 10 file');
            return null;
        }
        t.attr('data-ni', datani + 1);
    	t.clone().removeClass('more-images').removeAttr('data-ni').attr('style', 'display:block').show().insertBefore(t);
        }
    );
});
</script>